<template>
  <div class="home" :style="`width: ${width}; margin: 0 auto;`">
    <div class="common-layout">
      <el-container>
        <!-- 页头 -->
        <el-header class="home-header">
          <div class="clearfix">
            <div class="fl"><el-link href="#/" target="_blank"><span
                  style="font-size: 17px; font-weight: bold; color: white;">视频（后台管理系统）</span></el-link></div>
            <div class="fr">
              <div v-if="!isLogin">
                <el-link v-if="isShowRegister" href="#/register" type="danger">免费注册</el-link>
                &nbsp; &nbsp;
                <el-link href="#/login" type="danger">登录</el-link>
              </div>
              <div v-if="isLogin">
                <el-link href="#/my" style="color: white;">个人中心 【<span>{{ admin_name }}</span>】</el-link>
                <a style="font-size:15px; color:#ccc; vertical-align:middle;" href="javascript:;" @click="loginOut">退出</a>
              </div>
            </div>
          </div>
        </el-header>
      </el-container>

      <!-- 主体 -->
      <el-container>
        <!-- 侧边栏 -->
        <el-aside v-bind:width="isCollapse == true ? 'auto' : '200px'">
          <!-- 侧栏开关 -->
          <div style="padding-left: 15px;">
            <el-switch v-model="isCollapse" size="large" />
          </div>

          <!-- 侧栏菜单 -->
          <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
            @close="handleClose">
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <span>首页</span>
              </template>

              <el-sub-menu index="1-1">
                <template #title><span>运营分析</span></template>
                <el-menu-item index="1-1-1"><router-link exact-active-class="active"
                    to="/index">数据统计</router-link></el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="1-2">
                <template #title><span>广告模块</span></template>
                <el-menu-item index="1-2-1"><router-link exact-active-class="active"
                    to="/advert/list">轮播图列表</router-link></el-menu-item>
                <el-menu-item index="1-2-2"><router-link exact-active-class="active"
                    to="/advert/publish">添加轮播图</router-link></el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="1-3">
                <template #title><span>签到管理</span></template>
                <el-menu-item index="1-3-1"><router-link exact-active-class="active"
                    to="/signin/list">签到列表</router-link></el-menu-item>
              </el-sub-menu>

            </el-sub-menu>

            <el-sub-menu index="2">
              <template #title>
                <el-icon><icon-menu /></el-icon>
                <span>导航管理</span>
              </template>

              <el-sub-menu index="2-1">
                <template #title><span>导航模块</span></template>
                <el-menu-item index="2-1-1"><router-link exact-active-class="active"
                    to="/navigate/list">内容导航</router-link></el-menu-item>
                <el-menu-item index="2-1-2"><router-link exact-active-class="active"
                    to="/navigate/add">添加导航</router-link></el-menu-item>
              </el-sub-menu>
            </el-sub-menu>

            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <document />
                </el-icon>
                <span>视频管理</span>
              </template>

              <el-sub-menu index="3-1">
                <template #title><span>视频模块</span></template>
                <el-menu-item index="3-1-1"><router-link exact-active-class="active"
                    to="/video/list">视频列表</router-link></el-menu-item>
                <el-menu-item index="3-1-2"><router-link exact-active-class="active"
                    to="/video/add">添加视频</router-link></el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="3-2">
                <template #title><span>内容模块</span></template>
                <el-menu-item index="3-2-1"><router-link exact-active-class="active"
                    to="/content/list">内容列表</router-link></el-menu-item>
                <el-menu-item index="3-2-2"><router-link exact-active-class="active"
                    to="/content/add">添加内容</router-link></el-menu-item>
              </el-sub-menu>
            </el-sub-menu>



            <el-sub-menu index="4">
              <template #title>
                <el-icon>
                  <document />
                </el-icon>
                <span>文章管理</span>
              </template>

              <el-sub-menu index="4-1">
                <template #title><span>文章模块</span></template>
                <el-menu-item index="4-1-1"><router-link exact-active-class="active"
                    to="/article/list">文章列表</router-link></el-menu-item>
                <el-menu-item index="4-1-2"><router-link exact-active-class="active"
                    to="/article/add">发布文章</router-link></el-menu-item>
              </el-sub-menu>
            </el-sub-menu>


            <el-sub-menu index="5">
              <template #title>
                <el-icon>
                  <document />
                </el-icon>
                <span>用户管理</span>
              </template>

              <el-sub-menu index="5-1">
                <template #title><span>用户模块</span></template>
                <el-menu-item index="5-1-1"><router-link exact-active-class="active"
                    to="/user/list">普通用户列表</router-link></el-menu-item>
                <el-menu-item index="5-1-2"><router-link exact-active-class="active"
                    to="/user/admin">管理员列表</router-link></el-menu-item>
              </el-sub-menu>
            </el-sub-menu>


            <el-sub-menu index="6">
              <template #title>
                <el-icon>
                  <document />
                </el-icon>
                <span>评论管理</span>
              </template>
              <el-sub-menu index="6-1">
                <template #title><span>评论模块</span></template>
                <el-menu-item index="6-1-1"><router-link exact-active-class="active"
                    to="/comment/article">文章评论</router-link></el-menu-item>
                <el-menu-item index="6-1-2"><router-link exact-active-class="active"
                    to="/comment/content" v-if="false">内容评论</router-link></el-menu-item>
              </el-sub-menu>
            </el-sub-menu>


            <el-sub-menu index="7" v-if="false">
              <template #title>
                <el-icon>
                  <document />
                </el-icon>
                <span>回复管理</span>
              </template>
              <el-sub-menu index="7-1">
                <template #title><span>回复模块</span></template>
                <el-menu-item index="7-1-1"><router-link exact-active-class="active"
                    to="/reply/article">文章回复</router-link></el-menu-item>
                <el-menu-item index="7-1-2"><router-link exact-active-class="active"
                    to="/reply/content">内容回复</router-link></el-menu-item>
              </el-sub-menu>
            </el-sub-menu>

            <el-menu-item index="8">
              <el-icon>
                <setting />
              </el-icon>
              <template #title><router-link exact-active-class="active"
                    to="/base">基础设置</router-link></template>
            </el-menu-item>
          </el-menu>

        </el-aside>
        <!-- 出口 -->
        <el-main>
          <div>
            <el-divider content-position="left"><span style="font-size: 20px;">{{ nav_name }}</span></el-divider>
          </div>
          <router-view></router-view>
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script lang="ts" setup>
// 导入工具函数
import { logged } from '../utils/logged'
// 导入判断登录接口
import { nickNameApi } from '../http/request'
// 引入定义基本类型，定义引用类型的方法
import { ref, reactive } from 'vue'
// 导入elementplus图标
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
// 导入elementUI弹窗组件
import { ElNotification } from 'element-plus'
// 导入路由依赖
import { useRouter } from 'vue-router'

// #引入创建对象和结构取值的方法
import { storeToRefs } from 'pinia'
// 引入储存test模块数据的仓库
import useIndexStore from '../stores/index'
// #取出储存在useTestStore对象中的数据
let { width } = storeToRefs(useIndexStore())
// 创建路由对象
const $router = useRouter();
// 隐藏注册
let isShowRegister = ref(false)
// 控制侧栏菜单的布尔值
const isCollapse = ref(false)
// 全局变量
let nav_name = ref('首页');
// 用户名
let admin_name = ref('');
// 导航名称
let points = reactive({
  navs: [
    '首页',
    '导航管理',
    '内容管理',
    '文章管理',
    '用户管理',
    '评论管理',
    '回复管理',
    '基础设置',
  ]
})
// 事件交互
const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
  nav_name.value = points.navs[parseInt(key) - 1]
}
// 事件交互
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
// 设置网页标题
document.title = "中台主页";
// 获取用户临时身份
let token = localStorage.getItem('token');
// 判断是否登录
let isLogin = ref(false);
if (token) {
  logged(token).then(
    (data: any) => {
      // 表示已经登录
      if (data.code == 200) {
        isLogin.value = true;
        // 获取昵称
        nickNameApi({ token }).then(result => {
          if (result.code == 200) {
            // console.log(data)
            // 设置用户昵称
            admin_name.value = result.admin_name;
          }
        })
      } else {
        isLogin.value = false;
        admin_name.value = "";
        // 跳转页面
        $router.push({ path: '/login' })
      }
    }
  )
}
else {
   // 跳转页面
   $router.push({ path: '/login' })
}
// 退出登录
const loginOut = () => {
  if (confirm('您确定退出登录吗')) {
    //删除用户临时身份
    localStorage.removeItem('token');
    isLogin.value = false;
    admin_name.value = "";
    ElNotification({ title: '提示', message: '已退出登录。' })
    // 跳转页面
    $router.push({ path: '/login' })
  }
}

</script>
<style lang="scss">
@import '../static/style/base.scss';

.home-header {
  background-color: $bgColor;
  height: 60px;
  margin-bottom: 10px;

  .fl,
  .fr {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

.active {
  color: $activeColor !important;
}
</style>
